<template>
	<view>
		<z-paging ref="paging" v-model="orderList" @query="getOrderList" :default-page-size="limit">
			<v-tabs
				:scroll="false"
				color="#999"
				activeColor="#000"
				:lineScale="0.1"
				lineHeight="5rpx"
				lineColor="#000"
				v-model="current"
				:tabs="tabs"
				:fixed="true"
				field="name"
				@change="changeTab"
				slot="top"
			></v-tabs>

			<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="onClick(item)">
				<view class="order-item-id flex-row-center">
					<text class="id-view">ID:{{ item.orderid }}</text>
					<text class="status-view" v-if="item.status == 0">待付款</text>
					<text class="status-view" v-if="item.status == 1">待发货</text>
					<text class="status-view" v-if="item.status == 2">已发货</text>
					<text class="status-view" v-if="item.status == 3">已完成</text>
				</view>

				<view class="order-item-goods flex-row-center">
					<image :src="item.img" class="goods-img" mode="aspectFill"></image>
					<view class="goods-right flex-col">
						<view class="goods-right-title ellipsis-2">{{ item.name }}</view>

						<view class="price-view flex-row-between">
							<view class="text-price">
								¥
								<text>{{ item.price }}</text>
							</view>
							<view class="goods-right-num">x{{ item.num }}</view>
						</view>
					</view>
				</view>

				<view class="order-item-bottom flex-col">
					<view class="all-price">
						共{{ item.num }}件商品 合计:
						<text>￥{{ item.price }}</text>
					</view>
					<view class="flex-row-center">
						<view class="order-btn" @click.stop="onPay(item)" v-if="item.status == 0">去付款</view>
						<view class="order-btn" @click.stop="onCancel(item)" v-if="item.status == 0">取消订单</view>
						<view class="order-btn" @click.stop="onShouhuo(item)" v-if="item.status == 2">确认收货</view>
					</view>
				</view>
			</view>
		</z-paging>
		<show-modal></show-modal>
	</view>
</template>

<script src="./order.js"></script>

<style lang="scss">
@import '@/style/common.scss';
@import './order.scss';
</style>
